import React, { Component } from "react";

class Child extends Component {
  state = {
    count: 0,
    prevCount: 0,
  };

  // 从props里面得到一个state
  // 有一个state的值，让这个state的值一直跟随props的改变而改变
  // 必须要有static关键字, 必须要有state，必须要返回对象或者null
  // 如果return的是null，表示没有对象去合并，保留原先的state
  // 如果返回的是对象，那么这个对象就会和原先的state合并
  static getDerivedStateFromProps(props, state) {
    console.log("getDerivedStateFromProps");
    // return {
    //   count: props.num,
    // };

    /*
      1: props.num 10 state.prevCount 0 -> count 10 prevCount 10
      2: props.num 20 state.prevCount 10 -> count 20 prevCount 20
      3: props.num 20 state.prevCount 20 -> count 40
    */
    if (props.num === state.prevCount) {
      return null;
    } else {
      return {
        count: props.num,
        prevCount: props.num,
      };
    }
  }
  render() {
    return <div>child子组件 - {this.state.count}</div>;
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: 40,
      });
    }, 4000);
  }

  // 得到一条记录在更新之前
  // 必须和componentDidUpdate配合使用
  // 必须要返回一个快照值或者null

  // 快照只能去得到一些ui相关的css数据
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("getSnapshotBeforeUpdate");
    return 100;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate");
    console.log(snapshot);
  }
}

export default Child;
